<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list 
    :cities="cities" 
    :hotCities="hotCities"
    :letter="letter"
    ></city-list>
    <city-alpha 
    :cities="cities"
    @change="handleLetterChange"
    ></city-alpha>
  </div>
</template>

<script>
import  axios from 'axios'
import CityHeader from './components/CityHeader'
import CitySearch from './components/CitySearch'
import CityList from './components/CityList'
import CityAlpha from './components/CityAlpha'
  export default {
    name:"City",
    data(){
      return{
        cities:{},
        hotCities:[],
        letter:''
      }
    },
    components:{
      CityHeader,
      CitySearch,
      CityList,
      CityAlpha
    },
    methods:{
      getCityInfo(){
        axios.get('/api/city').then(this.getCityInfoSuc)
      },
      getCityInfoSuc(res){
        res=res.data
        if(res.ret&&res.data){
          const data=res.data
          this.cities=data.cities
          this.hotCities=data.hotCities
        }
      },
      handleLetterChange(letter){
        this.letter=letter
      }
    },
    mounted(){
      this.getCityInfo()
    }
  }
</script>

<style lang="stylus" scoped>

</style>